/* 全局选择器 */

* {
    /* 清除标签自带的外间距 */
    margin: 0;
    /* 清除标签自带的内间距 */
    padding: 0;
    /* 怪异盒 */
    box-sizing: border-box;
}

li {
    /* 去掉li自带的样式 */
    list-style: none;
}

a {
    /* 去掉自带的下划线 */
    text-decoration: none;
}


/* box */

.box {
    height: 400px;
    /* flex弹性盒:里面的儿子横着排 */
    display: flex;
}

.main {
    width: 400px;
    height: 400px;
    /* 父亲相对定位 */
    position: relative;
}

.main img {
    width: 100%;
    height: 100%;
}


/* mask遮罩层 */

.main .mask {
    /* 取消掉鼠标事件 */
    pointer-events: none;
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.3);
    /* 子元素绝对定位 */
    position: absolute;
    top: 0px;
    left: 0px;
    /* 隐藏 */
    display: none;
}

.small {
    width: 68px;
    height: 400px;
    /* 左外间距 */
    margin-left: 12px;
}

.small li {
    width: 68px;
    height: 68px;
    /* 边框透明色 */
    border: 2px solid transparent;
    /* 下外间距 */
    margin-bottom: 15px;
}

.small li img {
    width: 100%;
    height: 100%;
}

.big {
    width: 400px;
    height: 400px;
    background-color: green;
    display: none;
    background-image: url(./images/1.jpg);
    /* 背景大小 */
    background-size: 800px 800px;
}